<template>
    <view class="wrap">
        <!-- <view @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart u-flex-col u-flex-center">
			<image src="@/static/wImg/cart1.png"></image>
			购物车
		</view> -->
        <!-- <image src="../../static/index/cart.png" mode="" @click="$func.jump('/yCreate/pages/shoppingCart')"
			class="cart"></image> -->
        <view class="top">
            <!-- <view :style="'height:' + top +'px'"></view>  @click="addShow = true"-->
            <view
                class="u-flex u-row-between"
                :style="'padding-top:' + statusBarHeight + 'rpx'"
            >
                <picker :range="citylist" range-key="title" @change="choseCity">
                    <view class="u-flex top_add">
                        <view class="top_add_text">{{ city }}</view>
                        <image
                            src="@/static/wImg/blaSan.png"
                            class="top_san"
                        ></image>
                    </view>
                </picker>

                <view class="u-flex top_sea">
                    <image
                        src="@/static/wImg/greySea.png"
                        class="top_sea_img"
                    ></image>
                    <input
                        type="text"
                        @input="mescroll.resetUpScroll()"
                        v-model="keywords"
                        placeholder-style="color:#B0B0B0;"
                        placeholder="输入您想要的内容"
                    />
                </view>
            </view>
            <view class="u-flex claWrap">
                <view
                    class="claItem u-flex-col u-flex-center"
                    @click="claClick(index, item.id)"
                    :class="fwcate == item.id ? 'claCss' : ''"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <image :src="item.cover"></image>
                    <view class="cla_text u-flex-center">{{ item.title }}</view>
                </view>
            </view>
        </view>
        <view class="foot">
            <view class="fot_left">
                <view
                    class="left_item u-flex-center"
                    @click="leftClick(index)"
                    :class="index == leftIndex ? 'left_css' : ''"
                    v-for="(item, index) in LeftList"
                    :key="index"
                >
                    {{ item.title }}
                    <view class="left_line" v-if="index == leftIndex"></view>
                </view>
            </view>
            <view class="fot_right">
                <!-- <image src="@/static/yCreate/ceshi.png" mode="aspectFill" class="rig_img"></image> -->
                <!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="rig_img">
					<swiper-item style="width: 100%;height: 100%;" v-for="(item,index) in banner" :key="index">
						<view class="swiper-item">
							
						</view>
					</swiper-item>
				</swiper> -->
                <view class="" v-for="(item, index) in flowList" :key="index">
                    <view
                        class="flex align-center bg-ff padding-10 radius-10"
                        @click.stop="
                            $func.jump('/user/pages/detail?id=' + item.id)
                        "
                    >
                        <image
                            :src="item.cover"
                            mode=""
                            class="shopimg"
                        ></image>
                        <view class="flex-one margin-left-20">
                            <view
                                class="rig_tit text-26 text-bold text-cut-two height-70 line-35"
                            >
                                {{ item.title }}
                            </view>
                            <view class="text-26 text-a3">{{
                                item.sub_title
                            }}</view>
                            <view class="demo-price">
                                <view class="amtime"
                                    >{{ item.time_long }}分钟</view
                                >
                                <text>￥</text>{{ item.material_price }}
                                <text class="demo-price-grey"
                                    >￥{{ item.init_price }}</text
                                >
                            </view>
                        </view>
                    </view>
                    <!-- <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
						@up="upCallback"> -->
                    <view>
                        <view
                            class="flex align-center bg-ff margin-top-20 margin-bottom-20 padding-20 radius-10"
                            v-for="(items, indexs) in item.coash"
                            :key="indexs"
                            @click="toShowPopup(item.id, items.id)"
                        >
                            <view class="flex align-center flex-column">
                                <image
                                    :src="items.work_img"
                                    mode=""
                                    class="jshead"
                                ></image>
                                <view class="ztbtn" v-if="items.text_type == 1"
                                    >可服务</view
                                >
                                <view class="ztbtn" v-if="items.text_type == 2"
                                    >服务中</view
                                >
                                <view class="ztbtn" v-if="items.text_type == 3"
                                    >可预约</view
                                >
                                <view class="ztbtn" v-if="items.text_type == 4"
                                    >不可预约</view
                                >
                            </view>
                            <view class="flex-one margin-lr-30">
                                <view class="text-26 text-bold">{{
                                    items.coach_name
                                }}</view>
                                <view class="flex align-center margin-top-10">
                                    <i
                                        class="iconfont iconyduixingxingshixin icon-font-color"
                                        :style="{
                                            backgroundImage: `-webkit-linear-gradient(270deg, #F46C22 0%, #F46C22 100%)`,
                                        }"
                                        v-for="(aitem, aindex) in 1"
                                        :key="aindex"
                                    ></i>
                                    <text style="color: #ff7c11">{{
                                        items.star
                                    }}</text>
                                    <view class="text-20 text-b0 margin-left-15"
                                        >已服务{{ items.order_num }}单</view
                                    >
                                </view>
                                <view class="flex align-center margin-top-10">
                                    <image
                                        src="../../static/yCreate/icon.png"
                                        mode=""
                                        class="adres"
                                    ></image>
                                    <view class="text-24 margin-left-10">{{
                                        items.distance
                                    }}</view>
                                </view>
                            </view>
                            <view class="yybtn">预约TA</view>
                        </view>
                    </view>
                </view>
                <!-- </mescroll-body> -->
            </view>
        </view>
        <u-tabbar
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabList"
        ></u-tabbar>
        <!-- <u-picker v-model="addShow" mode="region"></u-picker> -->
        <view class="layer" v-if="addShow">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="addShow = false">取消</view>
                    <view class="" style="color: #007aff" @click="adresSubmit()"
                        >确定</view
                    >
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="changeAdres"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist1"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist2"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist3">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist3"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
        <!-- 领取优惠券 -->
        <view
            class="layer flex align-center justify-center flex-column"
            v-if="is_c_show"
            @click="is_c_show = false"
        >
            <view class="coupbg" @click.stop>
                <scroll-view scroll-y="true" class="sccoup">
                    <view
                        class="coupcard"
                        v-for="(item, index) in couponList"
                        :key="index"
                    >
                        <view
                            class="flex align-center justify-center"
                            style="color: #f9163c; width: 120rpx"
                        >
                            <text class="text-30">￥</text>
                            <text style="font-size: 55rpx">{{
                                item.discount
                            }}</text>
                        </view>
                        <view
                            class="flex-one margin-lr-30"
                            style="color: #f9163c"
                        >
                            <view class="text-28">元优惠券</view>
                            <view class="text-20 margin-top-10">
                                满{{ item.full }}元可使用</view
                            >
                            <view
                                class="text-16 margin-top-10"
                                style="color: #ababab"
                                v-if="item.day == 0"
                            >
                                有效期{{ item.start_time_text }}-{{
                                    item.end_time_text
                                }}</view
                            >
                            <view
                                class="text-16 margin-top-10"
                                style="color: #ababab"
                                v-if="item.day != 0"
                            >
                                展示领取后{{ item.day }}天使用</view
                            >
                        </view>
                        <view class="width-100">
                            <view
                                class="text-40"
                                style="color: #d21a38"
                                @click="getCoup(item.id)"
                                >立即领取</view
                            >
                        </view>
                    </view>
                </scroll-view>
            </view>
            <image
                src="../../static/index/close.png"
                mode=""
                class="closeimg"
                @click="is_c_show = false"
            ></image>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            top: 0,
            addShow: false,
            claIndex: 0,
            leftIndex: 0,
            list: [],
            flowList: [],
            LeftList: [],
            keywords: "",
            tabList: [
                {
                    iconPath: "/static/tab/service_nor.png",
                    selectedIconPath: "/static/tab/service_sel.png",
                    text: "首页",
                },
                {
                    iconPath: "/static/tab/cate_nor.png",
                    selectedIconPath: "/static/tab/cate_sel.png",
                    text: "分类",
                },
                {
                    iconPath: "/static/tab/live_nor.png",
                    selectedIconPath: "/static/tab/live_sel.png",
                    text: "直播",
                },
                {
                    iconPath: "/static/tab/dynamic_nor.png",
                    selectedIconPath: "/static/tab/dynamic_sel.png",
                    text: "动态",
                },

                {
                    iconPath: "../../static/tab/wode_nor.png",
                    selectedIconPath: "../../static/tab/wode_sel.png",
                    text: "我的",
                },
            ],
            current: 1,
            banner: "",
            arealist1: [],
            arealist2: [],
            arealist3: [],
            areaname: "",
            multiIndex: [0, 0, 0],
            indicatorStyle: "height: 80rpx;",
            city: "",
            cateid: "",
            statusBarHeight: 0,
            fwcate: "",
            fwpro: "",
            couponList: [],
            is_c_show: false,
            lat: "",
            lng: "",
            citylist: [],
            cityid: "",
        };
    },
    watch: {
        tabList: {
            handler(newVal, oldVal) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                    newVal.forEach((item, index) => {
                        if (item.text == "直播" || item.text == "动态") {
                            newVal.splice(index, 1);
                        }
                    });
                }
            },
            immediate: true,
            deep: true,
        },
    },
    computed: mapState({
        configInfo: (state) => state.config.configInfo,
        cityId: (state) => state.technician.cityId,
    }),
    onLoad(options) {
        if (options.second) {
            this.fwcate = options.second;
        }
        if (options.third) {
            this.leftIndex = options.third;
        }
        uni.getSystemInfo({
            success: (res) => {
                // 状态栏的高度
                this.statusBarHeight = res.statusBarHeight + 30;
            },
        });
        if (options.id) {
            this.cateid = options.id;
            uni.setStorageSync("category_id", options.id);
            // this.LeftList = this.list[this.claIndex].childlist
        }
        // if (uni.getStorageSync('city')) {
        // 	this.city = uni.getStorageSync('city_name')
        // } else {
        // 	this.city = '哈尔滨'
        // }

        // 检测升级获取位置信息权限

        uni.getLocation({
            type: "wgs84",
            success: (res) => {
                console.log(res, "定位");
                let location = {
                    lng: res.longitude,
                    lat: res.latitude,
                    address: "定位成功",
                    province: "",
                    city: "",
                    district: "",
                };
                uni.setStorageSync("location", location);
                var that = this;
                that.$u
                    .post("/api/index/getAddress", {
                        lat: res.latitude,
                        lng: res.longitude,
                    })
                    .then((res) => {
                        console.log(res, "定位接口1");
                        if (res.code == 1) {
                            that.city = res.data.city;
                        }
                    });
                that.lat = res.latitude;
                that.lng = res.longitude;
            },
            fail: () => {
                console.log("获取位置失败");
            },
        });
        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.top == 0) {
            this.top = 20;
        } else {
            this.top = res.safeAreaInsets.top;
        }
        // this.classFn()
        this.$u.post("/api/index/area_list", {}).then((res) => {
            if (res.code == 1) {
                var address = res.data;
                this.arealist1 = address;
                this.arealist2 = address[0].children;
                this.arealist3 = address[0].children[0].children;
            }
        });
        this.getcouponList();
        this.getCate();
        this.getCity();
    },
    methods: {
        choseCity(e) {
            this.city = this.citylist[e.detail.value].title;
            this.cityid = this.citylist[e.detail.value].id;
            this.getList();
        },
        // 获取城市
        async getCity() {
            let res = await this.$api.service.getCity({
                lat: uni.getStorageSync("location").lat,
                lng: uni.getStorageSync("location").lng,
            });
            console.log(res, "获取城市列表");
            this.citylist = res;
        },

        async getCate() {
            let res = await this.$api.service.serviceCate({
                cate_type: 2,
                category_id: this.cateid,
            });
            console.log(this.cateid, res, "fenlei");
            this.list = res;
            this.fwcate = this.fwcate ? this.fwcate : res[0].id;
            this.LeftList = this.list[this.claIndex].children;
            this.fwpro = this.list[this.claIndex].children[0].children;
            this.getList();
        },
        async getcouponList() {
            let res = await this.$api.service.getcouponList({
                cate_id: this.cateid,
            });
            console.log(res, "优惠券列表");
            this.couponList = res;
            if (this.couponList.length > 0) {
                this.is_c_show = true;
            }
        },
        async getCoup(id) {
            let res = await this.$api.service.getuserGetCoupon({
                coupon_id: id,
            });
            console.log(res);
            if (res == true) {
                uni.showToast({
                    title: "领取成功",
                });
            }
            this.getcouponList();
            if (this.couponList.length == 0) {
                this.is_c_show = false;
            }
        },
        claClick(index, id) {
            this.fwcate = id;
            this.claIndex = index;
            this.leftIndex = 0;
            this.LeftList = this.list[this.claIndex].children;
            // this.mescroll.resetUpScroll();
            // uni.setStorageSync('category_id', id)
        },
        leftClick(index) {
            this.leftIndex = index;
            this.getList();
            // this.mescroll.resetUpScroll();
        },
        async getList() {
            var location = uni.getStorageSync("location");
            let res = await this.$api.service.getThreeCate({
                lat: location.lat,
                lng: location.lng,
                cate_id: this.LeftList[this.leftIndex].id,
                city_id: this.cityid,
            });
            console.log(res, "技师列表");
            this.flowList = res;
        },

        // classFn() {
        // 	this.$u.post('/api/index/get_category', {
        // 		category_id: this.cateid
        // 	}).then(res => {
        // 		if (res.code == 1) {
        // 			this.list = res.data.category
        // 			if (this.cateid) {
        // 				let index = res.data.category.findIndex(item => item.id == this.cateid);
        // 				let timeindex = index == -1 ? 0 : index;
        // 				this.LeftList = this.list[timeindex].childlist
        // 				uni.setStorageSync('category_id', this.cateid)
        // 			} else {
        // 				this.cateid = res.data.category[0].id
        // 				this.LeftList = this.list[this.claIndex].childlist
        // 				uni.setStorageSync('category_id', this.cateid)
        // 			}
        // 			this.banner = res.data.banner
        // 			setTimeout(() => {
        // 				this.mescroll.resetUpScroll();
        // 			}, 300)
        // 		}
        // 	});
        // },
        // upCallback(page) {
        // 	this.mescroll.optDown.use = false;
        // 	this.mescroll.optUp.textNoMore = '- 已经到底啦 -'
        // 	this.$u.post('/api/wanlshop/product/lists', {
        // 		page: page.num,
        // 		// limit: page.size,
        // 		search: this.keywords,
        // 		sort: 'weigh',
        // 		order: 'asc',
        // 		filter: JSON.stringify({
        // 			"category_id": this.LeftList[this.leftIndex].id
        // 		}),
        // 		op: '{"category_id": "in"}',
        // 		type: 'goods',
        // 		location_city: uni.getStorageSync('city')
        // 	}).then(res => {
        // 		this.mescroll.endBySize(res.data.data.length, res.data.total);
        // 		if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
        // 		this.flowList = this.flowList.concat(res.data.data); //追加新数据
        // 	}).catch(() => {
        // 		//联网失败, 结束加载
        // 		this.mescroll.endErr();
        // 	})
        // },
        changeTab(e) {
            if (uni.getStorageSync("configInfo").live_switch !== 0) {
                if (e == 0) {
                    this.$func.jump("/pages/service");
                } else if (e == 1) {
                    this.$func.jump("/wNew/pages/fuwucate");
                } else if (e == 2) {
                    this.$func.jump("/live/pages/live/liveList?type=2");
                }
                if (e == 3) {
                    this.$func.jump("/pages/dynamic?children=1");
                } else if (e == 4) {
                    this.$func.jump("/pages/mine");
                }
            } else {
                if (e == 0) {
                    this.$func.jump("/pages/service");
                } else if (e == 1) {
                    this.$func.jump("/wNew/pages/fuwucate");
                } else if (e == 2) {
                    this.$func.jump("/pages/mine");
                }
            }
            return;
            if (e == 0) {
                this.$func.jump("/wNew/pages/fuwu");
            } else if (e == 3) {
                this.$func.jump("/pages/dynamic?children=1");
            } else if (e == 2) {
                this.$func.jump("/live/pages/live/liveList?type=2");
            } else if (e == 4) {
                this.$func.jump("/pages/mine");
            }
        },
        changeAdres(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [
                    this.multiIndex[0],
                    this.multiIndex[1],
                    curMultiIndex[2],
                ];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.arealist2 = this.arealist1[i].children;
            this.arealist3 = this.arealist1[i].children[j].children;
            console.log(this.cateid);
        },
        adresSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            var dz =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].children[k].name;
            this.city = this.arealist1[i].children[j].children[k].name;
            uni.setStorageSync("city", dz);
            uni.setStorageSync(
                "city_name",
                this.arealist1[i].children[j].children[k].name
            );
            this.$u
                .post("/api/wanlshop/product/lists", {
                    page: 1,
                    search: this.keywords,
                    sort: "weigh",
                    order: "asc",
                    filter: JSON.stringify({
                        category_id: this.LeftList[this.leftIndex].id,
                    }),
                    op: '{"category_id": "in"}',
                    type: "goods",
                    location_city: uni.getStorageSync("city"),
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    this.flowList = res.data.data; //追加新数据
                });
            this.addShow = false;
        },
        goRich(type) {
            uni.navigateTo({
                url: "/pages/rich?type=" + type,
            });
        },
        async toShowPopup(id, ids) {
            let res = await this.$api.order.addCar({
                coach_id: ids,
                coach_service: 1,
                is_top: 1,
                num: 1,
                service_id: id,
            });
            console.log(res);
            uni.navigateTo({
                url: "/user/pages/order?id=" + ids + "&ser_id=" + id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import url(@/components/common.css);

.cart {
    width: 140rpx;
    height: 140rpx;
    position: fixed;
    bottom: 200rpx;
    border-radius: 50%;
    background: #fff;
    right: 20rpx;
    z-index: 9999;
    font-size: 28rpx;

    image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 7rpx;
    }
}

.wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top {
    padding: 20rpx 30rpx 50rpx;
    background-image: linear-gradient(to right, #dbdfff, #dbdfff);

    .top_add {
        .top_add_text {
            width: 120rpx;
            font-size: 28rpx;
            overflow: hidden; // 文字超长隐藏
            text-overflow: ellipsis; // 显示...
            white-space: nowrap; // 单行显示
        }

        .top_san {
            width: 22rpx;
            height: 10rpx;
            margin-left: 10rpx;
        }
    }

    .top_sea {
        flex: 1;
        margin-left: 40rpx;
        height: 60rpx;
        padding: 0 18rpx;
        border-radius: 20rpx;
        background: #fff;
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .top_sea_img {
            width: 25rpx;
            height: 23rpx;
        }

        input {
            color: #b0b0b0;
            height: 20rpx;
            font-size: 24rpx;
            padding: 0 18rpx;
            margin-left: 18rpx;
            border-left: 1rpx solid #b0b0b0;
        }
    }

    .claWrap {
        margin-top: 30rpx;
        overflow-x: auto;
        overflow-y: hidden;

        .claItem {
            margin-right: 20rpx;

            image {
                width: 68rpx;
                height: 68rpx;
                border-radius: 50%;
                background: #fff;
                // padding: 10rpx;
                margin-bottom: 16rpx;
            }

            .cla_text {
                width: 104rpx;
                height: 32rpx;
                font-size: 22rpx;
                border-radius: 40rpx;
            }
        }

        .claCss {
            image {
                border: 1rpx solid #606dce;
            }

            .cla_text {
                color: #fff;
                background: #606dce;
            }
        }
    }
}

.foot {
    flex: 1;
    margin-top: 12rpx;
    position: relative;

    .fot_left {
        width: 200rpx;
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0rpx;
        overflow-y: auto;

        .left_item {
            height: 88rpx;
            background: #fff;
            position: relative;
        }

        .left_line {
            width: 6rpx;
            height: 60rpx;
            position: absolute;
            top: 15rpx;
            left: 0;
            background: #606dce;
            border-radius: 40rpx;
        }

        .left_css {
            background: #dbdfff;
        }
    }

    .fot_right {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 200rpx;
        bottom: 0rpx;
        padding: 0 30rpx 180rpx;
        overflow-y: auto;

        .rig_img {
            width: 504rpx;
            height: 208rpx;
            border-radius: 20rpx;
        }

        .right_item {
            background: #fff;
            border-radius: 20rpx;
            padding: 10rpx;
            margin-top: 20rpx;

            .rig_item_img {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .rig_tit {
                font-size: 26rpx;
                color: #333;
                font-weight: bold;
            }

            .mark {
                font-size: 20rpx;
                color: #fff;
                padding: 6rpx 10rpx;
                background: #ef5205;
                border-radius: 4rpx;
                margin-right: 20rpx;
            }

            .markGreen {
                background: #606dce;
            }

            .demo-tag {
                display: flex;
                margin-top: 5px;
            }

            .demo-tag-text {
                border: 1px solid #f43000;
                color: #f43000;
                margin-right: 8px;
                line-height: 1;
                padding: 8rpx 24rpx 8rpx 16rpx;
                display: flex;
                align-items: center;
                border-radius: 4rpx;
                font-size: 20rpx;
            }

            .demo-tag-text-grey {
                border: 1px solid #999;
                color: #999;
            }

            .demo-price {
                font-size: 30rpx;
                color: $u-type-error;
                font-weight: bold;
                font-size: 32rpx;
                display: flex;
                align-items: center;

                text {
                    font-size: 20rpx;
                }

                .demo-price-grey {
                    color: #d3d3d3;
                    font-size: 20rpx;
                    font-weight: 400;
                    margin-left: 18rpx;
                    text-decoration: line-through;
                }
            }
        }
    }
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.shopimg {
    width: 160rpx;
    height: 160rpx;
    border-radius: 10rpx;
}

.mark {
    font-size: 20rpx;
    color: #fff;
    padding: 6rpx 10rpx;
    background: #ef5205;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    border: 1px solid #f43000;
    color: #f43000;
    margin-right: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 24rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}

.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;
    display: flex;
    align-items: center;

    text {
        font-size: 20rpx;
    }

    .demo-price-grey {
        color: #d3d3d3;
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 18rpx;
        text-decoration: line-through;
    }
}

.jshead {
    width: 92rpx;
    height: 92rpx;
    border-radius: 50%;
}

.ztbtn {
    // width: 83rpx;
    height: 28rpx;
    background: linear-gradient(269deg, #4f5052 0%, #101010 100%);
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    padding: 0 10rpx;
    font-size: 20rpx;
    color: #f2f1d2;
    line-height: 28rpx;
    margin-top: 10rpx;
}

.text-b0 {
    color: #b0b0b0;
}

.adres {
    width: 20rpx;
    height: 25rpx;
}

.yybtn {
    width: 112rpx;
    height: 46rpx;
    background: linear-gradient(90deg, #5f6acc 0%, #6e99de 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    font-size: 20rpx;
    color: #ffffff;
    line-height: 46rpx;
    text-align: center;
}

.coupbg {
    width: 600rpx;
    height: 860rpx;
    background-image: url(../../static/coupon/couplayer.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.sccoup {
    width: 100%;
    height: 500rpx;
    margin-top: 324rpx;
}

.coupcard {
    width: 548rpx;
    height: 148rpx;
    background-image: url(../../static/coupon/coupon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto 20rpx;
    display: flex;
    align-items: center;
}

.closeimg {
    width: 50rpx;
    height: 50rpx;
    margin-top: 35rpx;
}

.amtime {
    // width: 74rpx;
    height: 28rpx;
    background: linear-gradient(269deg, #4f5052 0%, #101010 100%);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    padding: 0 6rpx;
    font-size: 20rpx;
    color: #f2f1d2;
    line-height: 28rpx;
    margin-right: 10rpx;
}
</style>